<template>
  <div class="echart-pie-container">
    <div
      ref="chart"
      style="width: 100%; height: 100%"
    >
    </div>
  </div>

</template>

<script>
import echarts from 'echarts';
export default {
  props: {
    dataOptionList: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      option: null,
      myChart: null,
      legend: {}
    };
  },
  mounted() {
    window.addEventListener('resize', this.onResize);
  },
  methods: {
    onResize() {
      this.myChart.resize();
    },
    getEchartData() {
      const chart = this.$refs.chart;
      this.myChart = echarts.init(chart);
      if (chart) {
        this.option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 25
            },
            data: this.dataOptionList.lineX
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.dataOptionList.lineY,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'inside',
                    color: '#fff'
                  }
                }
              },
              type: 'bar',
              // color: '#2f4554',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              }
            }
          ],
          title: {
            text: this.dataOptionList.title,
            left: '10px',
            top: '10px',
            textStyle: {
              color: '#636985'
            }
          }
          // tooltip: {},
          // series: [
          //   {
          //     // name: this.dataOptionList.dataPie[0][0],
          //     type: 'line',
          //     itemStyle: {
          //       normal: {
          //         color: params => {
          //           const colorList = this.dataOptionList.colorList;
          //           return colorList[params.dataIndex];
          //         }
          //       }
          //     },
          //     data: this.dataOptionList.dataPie,
          //     labelLine: {
          //       show: false
          //     }
          //   }
          // ]
        };
        this.myChart.setOption(this.option);
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  }
};
</script>

<style lang="scss" scoped>
.echart-pie-container {
  position: relative;
}
.detail-button {
  position: absolute;
  top: 0px;
  right: 15px;
}
</style>
